<template>
	<!-- 20230510 -->
	<view class="mall-my-evaluate-page">
		<!-- 页面内容 -->
		<view class="page-content">

			<!-- 订单产品循环 -->
			<view>
				<view class="margin-bottom-20 padding-lr-30  bg-ff" v-for="(item,index) in orderProduct"
					:key="index">

					<!-- 产品 -->
					<view class="padding-tb-10">
						<jc-mall-orderProducts :list="[item]"></jc-mall-orderProducts>
					</view>
					<!-- <view class="padding-20 flex align-center bg-f5">
						<image class="jc-image-120 radius-10" :src="item.product_cover_img" mode="aspectFill"></image>
						<view class="margin-left-20 flex-one">
							<view class="line-height-30 text-24 text-4d text-cut-one">{{item.product_name}}</view>
							<view class="margin-top-20 line-30 height-60 text-22 text-80 text-cut-two">
								{{item.product_sku_name}}</view>
						</view>
					</view> -->

					<!-- 评星 -->
					<view class="padding-bottom-30 dashed-bottom-ed flex align-center justify-between">
						<view class="text-28 text-33">描述相符</view>
						<view class="flex align-center">
							<ty-text-rate :value="item.star" :index="index" @change="changeRate"></ty-text-rate>
							<text class="margin-left-20 text-26" v-if="item.star > 3">好评</text>
							<text class="margin-left-20 text-26" v-else-if="item.star == 3">中评</text>
							<text class="margin-left-20 text-26" v-else>差评</text>
						</view>
					</view>

					<!-- 评语 -->
					<view class="padding-top-30 padding-bottom-15">
						<textarea class="width-100p text-30 line-40" style="height:160rpx;" v-model="item.content"
							maxlength="200" placeholder="亲,咱平台的服务能够达到您的预期吗?您的评价是商家不断进步的源泉,写点什么吧" />
					</view>

					<!-- 图片和视频 -->
					<view class="padding-bottom-15">
						<ty-image-images-upload :index="index" @imageChange="imageChange" @videoChange="videoChange">
						</ty-image-images-upload>
					</view>
				</view>
			</view>

			<view class="jc-footer-safe">
				<view class="margin-tb-10 padding-lr-30" @click="confirm">
					<view class="line-height-80 radius-40 bg-main text-center text-30 text-ff">确定</view>
				</view>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">

		</view>
	</view>
</template>

<script>
	import mall from '../api/mall.js'
	export default {
		data() {
			return {
				// 订单ID
				orderId: 0,
				// 订单产品
				orderProduct: [],
			}
		},

		onLoad(options) {
			this.orderId = options.id || ''
		},

		onReady() {
			// 加载订单详情
			mall.order.getMyOrder(this.orderId).then(res => {
				if (res.code == 0) {
					let mallOrderProduct = res.data.detail.mallOrderProduct
					let curMallOrderProduct = []
					mallOrderProduct.forEach((val, index) => {
						if (val.number > val.refund_total_number) {
							val.star = 5
							val.content = ''
							val.img_path = []
							val.video_path = []
							curMallOrderProduct.push(val)
						}
					})
					this.orderProduct = curMallOrderProduct
				}
			})
		},

		methods: {
			// 评星
			changeRate(e) {
				this.orderProduct[e.index].star = e.star;
				console.log(this.orderProduct[e.index].star)
			},

			//图片改变
			imageChange(e) {
				this.orderProduct[e.index].img_path = e.image_list
			},

			//视频改变
			videoChange(e) {
				this.orderProduct[e.index].video_path = e.video_list
			},

			// 评价
			confirm() {
				let can_submit = true
				this.orderProduct.forEach(val => {
					if (!val.content) {
						can_submit = false
						return false
					}
				})
				if (!can_submit) {
					this.cn.toast('评论内容必填')
					return false
				}

				mall.evaluate.insertEvaluate(this.orderId, JSON.stringify(this.orderProduct)).then(res => {
					if (res.code == 0) {
						this.cn.alert(res.msg).then(res => {
							uni.navigateBack({
								delta: 1
							})
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* 页面内容 */
	.page-content {
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx + 20rpx);
	}
</style>
